<template>
  <div class="no-background-container">
    <el-affix :offset="72">
      <div class="qs-y-table-header">
        <div class="header-label">
          <div class="header-label-title">{{ routeName }}</div>
        </div>
        <div class="header-query">
          <div>
            <el-button type="primary" @click="showFormDialog = true">新增{{ moduleName }}</el-button>
            <el-button type="primary">批量导入</el-button>
          </div>
          <qs-query-form v-model="queryForm" :fields="queryFields" :loading="listLoading" @reset="resetQuery" @search="queryData" />
        </div>
      </div>
    </el-affix>

    <div class="qs-y-table-card">
      <qs-table
        border
        :columns="tableColumns"
        :data="list"
        :loading="listLoading"
        :pagination="{
          currentPage: queryForm.page,
          pageSize: queryForm.limit,
          total,
          layout,
        }"
        show-index
        stripe
        @page-change="handleCurrentChange"
        @selection-change="setSelectRows"
        @size-change="handleSizeChange"
      >
        <template #column-userName="{ row }">
          <div style="cursor: pointer" @click="handleDetails(row)">
            <div style="font-size: 14px; font-weight: 500; color: var(--el-color-primary)">{{ row.userName }}</div>
            <div style="font-size: 12px">ID: {{ row.userId }}</div>
          </div>
        </template>

        <template #column-feeStatus="{ row }">
          <el-tag :type="getFeeStatusType(row.feeStatus)">{{ row.feeStatus }}</el-tag>
        </template>

        <!-- eslint-disable-next-line @typescript-eslint/no-unused-vars -->
        <template #operation="{ row }">
          <el-button size="small" text @click="handleEdit(row)">编辑</el-button>
          <el-button size="small" text type="danger" @click="handleDelete(row)">删除</el-button>
        </template>
      </qs-table>
    </div>

    <qs-form-dialog
      v-model="showFormDialog"
      :fields="formFields"
      :form-data="form"
      :loading="formLoading"
      :title="isEditMode ? `编辑${moduleName}` : `新增${moduleName}`"
      @cancel="showFormDialog = false"
      @confirm="handleFormSubmit"
    />
  </div>
</template>

<script lang="ts" setup>
import { ElMessage, ElMessageBox } from 'element-plus'
import { computed, onActivated, onBeforeMount, reactive, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import QsFormDialog from '../../components/Dialog-new/FormDialog.vue'
import QsQueryForm from '../../components/QueryForm-new/index.vue'
import QsTable from '../../components/Table-new/index.vue'

const mockData = [
  {
    id: 1,
    userName: '张三',
    userId: '001',
    meetingName: '会议A',
    stayDate: '2023-10-01',
    hotelName: '酒店A',
    roomType: '单人间',
    roomNumber: '101',
    isCheckIn: '否',
    checkInTime: null,
    checkOutTime: null,
    feeStatus: '未支付',
    remarks: '无',
  },
  {
    id: 2,
    userName: '李四',
    userId: '002',
    meetingName: '会议B',
    stayDate: '2023-10-02',
    hotelName: '酒店B',
    roomType: '双人间',
    roomNumber: '201',
    isCheckIn: '是',
    checkInTime: '2023-10-02 14:00:00',
    checkOutTime: '2023-10-04 12:00:00',
    feeStatus: '已支付',
    remarks: '需提前通知',
  },
]

const form = ref<any>({})
const formLoading = ref(false)

const isEditMode = ref(false)

const handleEdit = (row: any) => {
  form.value = { ...row }
  showFormDialog.value = true
  isEditMode.value = true
}

// eslint-disable-next-line @typescript-eslint/no-unused-vars
const getFeeStatusType = (status: string): 'success' | 'warning' | 'info' | 'primary' | 'danger' => {
  switch (status) {
    case '已支付': {
      return 'success'
    }
    case '未支付': {
      return 'danger'
    }
    case '部分支付': {
      return 'warning'
    }
    case '退款中': {
      return 'info'
    }
    default: {
      return 'primary'
    }
  }
}

const handleDelete = (row: any) => {
  ElMessageBox.confirm('此操作将永久删除该记录, 是否继续?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(() => {
      ElMessage({
        type: 'success',
        message: '删除成功!',
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消删除',
      })
    })
}

const moduleName = '入住信息'

const route = useRoute()
const router = useRouter()
const routeName = computed(() => route.meta.title || '')

const list = ref<any>([])
const listLoading = ref<boolean>(true)
const layout = ref<string>('total, sizes, prev, pager, next, jumper')
const total = ref<number>(0)
const selectRows = ref<any>([])

const queryForm = reactive<any>({
  page: 1,
  limit: 20,
  userName: '',
  userId: '',
  meetingName: '',
  stayDate: '',
  hotelName: '',
  roomType: '',
  isCheckIn: '',
  feeStatus: '',
})

const queryFields = ref([
  {
    label: '用户姓名',
    prop: 'userName',
    component: 'input',
    placeholder: '请输入用户姓名',
  },
  {
    label: '用户ID',
    prop: 'userId',
    component: 'input',
    placeholder: '请输入用户ID',
  },
  {
    label: '会议名称',
    prop: 'meetingName',
    component: 'input',
    placeholder: '请输入会议名称',
  },
  {
    label: '入住日期',
    prop: 'stayDate',
    component: 'date-picker',
    placeholder: '请选择入住日期',
    valueFormat: 'YYYY-MM-DD',
  },
])

const tableColumns = ref([
  {
    label: '用户姓名',
    prop: 'userName',
    minWidth: 150,
  },
  {
    label: '会议名称',
    prop: 'meetingName',
    minWidth: 180,
  },
  {
    label: '入住日期',
    prop: 'stayDate',
    minWidth: 120,
  },
  {
    label: '酒店名称',
    prop: 'hotelName',
    minWidth: 150,
  },
  {
    label: '房间类型',
    prop: 'roomType',
    minWidth: 120,
  },
  {
    label: '房间号码',
    prop: 'roomNumber',
    minWidth: 100,
  },
  {
    label: '是否入住',
    prop: 'isCheckIn',
    minWidth: 100,
  },
  {
    label: '费用状态',
    prop: 'feeStatus',
    minWidth: 120,
  },
  {
    label: '备注',
    prop: 'remarks',
    minWidth: 200,
  },
])

const formFields = ref([
  {
    label: '用户姓名',
    prop: 'userName',
    component: 'input',
    required: true,
    placeholder: '请输入用户姓名',
    colSpan: 12,
  },
  {
    label: '用户ID',
    prop: 'userId',
    component: 'input',
    placeholder: '请输入用户ID',
    colSpan: 12,
  },
  {
    label: '会议名称',
    prop: 'meetingName',
    component: 'input',
    required: true,
    placeholder: '请输入会议名称',
    colSpan: 12,
  },
  {
    label: '入住日期',
    prop: 'stayDate',
    component: 'date-picker',
    required: true,
    placeholder: '请选择入住日期',
    colSpan: 12,
    valueFormat: 'YYYY-MM-DD',
  },
  {
    label: '酒店名称',
    prop: 'hotelName',
    component: 'input',
    required: true,
    placeholder: '请输入酒店名称',
    colSpan: 12,
  },
  {
    label: '房间类型',
    prop: 'roomType',
    component: 'select',
    options: [
      { value: '单人间', label: '单人间' },
      { value: '双人间', label: '双人间' },
      { value: '套房', label: '套房' },
    ],
    placeholder: '请选择房间类型',
    colSpan: 12,
  },
  {
    label: '房间号码',
    prop: 'roomNumber',
    component: 'input',
    placeholder: '请输入房间号码',
    colSpan: 12,
  },
  {
    label: '是否入住',
    prop: 'isCheckIn',
    component: 'select',
    options: [
      { value: '是', label: '是' },
      { value: '否', label: '否' },
    ],
    placeholder: '请选择是否入住',
    colSpan: 12,
  },
  {
    label: '入住时间',
    prop: 'checkInTime',
    component: 'date-picker',
    placeholder: '请选择入住时间',
    colSpan: 12,
    type: 'datetime',
    valueFormat: 'YYYY-MM-DD HH:mm:ss',
  },
  {
    label: '退房时间',
    prop: 'checkOutTime',
    component: 'date-picker',
    placeholder: '请选择退房时间',
    colSpan: 12,
    type: 'datetime',
    valueFormat: 'YYYY-MM-DD HH:mm:ss',
  },
  {
    label: '费用状态',
    prop: 'feeStatus',
    component: 'select',
    options: [
      { value: '未支付', label: '未支付' },
      { value: '已支付', label: '已支付' },
      { value: '部分支付', label: '部分支付' },
      { value: '退款中', label: '退款中' },
    ],
    placeholder: '请选择费用状态',
    colSpan: 12,
  },
  {
    label: '备注',
    prop: 'remarks',
    component: 'textarea',
    placeholder: '请输入备注信息',
    colSpan: 24,
  },
])

const showFormDialog = ref(false)

const fetchData = async () => {
  listLoading.value = true
  try {
    list.value = mockData
    total.value = mockData.length
  } catch (error) {
    console.error('获取住宿信息失败:', error)
    list.value = mockData
    total.value = mockData.length
  } finally {
    listLoading.value = false
  }
}

const handleSizeChange = (size: number) => {
  queryForm.limit = size
  queryForm.page = 1
  fetchData()
}

const handleCurrentChange = (page: number) => {
  queryForm.page = page
  fetchData()
}

const resetQuery = () => {
  queryForm.userName = ''
  queryForm.userId = ''
  queryForm.meetingName = ''
  queryForm.stayDate = ''
  queryForm.page = 1
  fetchData()
}

const queryData = () => {
  queryForm.page = 1
  fetchData()
}

const setSelectRows = (selection: any[]) => {
  selectRows.value = selection
}

const handleDetails = (row: any) => {
  router.push({
    name: 'StayInfoDetails',
    query: {
      id: row.id,
      userName: row.userName,
    },
  })
}

const handleFormSubmit = (formData: any) => {
  formLoading.value = true
  setTimeout(() => {
    console.log('表单提交的数据:', formData)
    isEditMode.value = false
    showFormDialog.value = false
    formLoading.value = false
    form.value = {}
    fetchData()
    ElMessage.success(isEditMode.value ? '编辑成功!' : '新增成功!')
  }, 500)
}

onActivated(() => {
  fetchData()
})

onBeforeMount(() => {
  fetchData()
})
</script>

<style scoped>
.qs-query-form {
  display: inline-block;
}

.statistics-cards {
  display: flex;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 16px;
}

.statistics-card {
  flex: 1;
  min-width: 200px;
  max-width: 300px;
  background-color: #fff;
  border-radius: 4px;
  padding: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.card-title {
  font-size: 16px;
  margin-bottom: 15px;
  color: #606266;
}

.card-value {
  font-size: 24px;
  font-weight: 500;
  color: #303133;
}

.chart-container {
  height: 400px;
  margin-top: 20px;
  background-color: #fff;
  padding: 20px;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.qs-y-table-header {
  display: flex;
  flex-direction: column;
  margin-bottom: 16px;
  background-color: #fff;
  padding: 16px;
  border-radius: 4px;
  gap: 16px;
}

.header-label {
  display: flex;
  align-items: center;
}

.header-label-title {
  font-size: 16px;
  font-weight: 600;
}

.header-query {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: space-between;
}
</style>
